<template>
    <div class='suspenseCom'>
        suspenseCom ===》{{ refVal }} -----provideVal:{{ provideVal }}

    </div>
</template>

<script lang='ts' setup>

import { ref, reactive, toRefs, inject, type Ref } from 'vue';
// js定义inject
// const provideVal = inject('provideVal')
// ts定义inject
const provideVal = inject<Ref<string>>('provideVal')

const refVal = ref('------')
await setTimeout(() => {
    refVal.value = '6666'
    // 给inject 初始值
    // provideVal = inject<Ref<string>>('provideVal', ref('#99999'))
    //使用非空断言  ！.
    provideVal!.value = 'pink'
}, 3000)


</script>

<style scoped >
div {
    color: v-bind(provideVal);
}
</style>